<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <div class="grid-content bg-purple">&emsp;&emsp;&emsp;</div>
    </el-col>
    <el-col :span="16">
      <div class="grid-content bg-purple">
        <div class="ww">
          <!--查询表单-->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="value.dictName" placeholder="类型名称" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="value.dictType" placeholder="类型">
                <el-option
                  v-for="item in options"
                  :key="item.dictName"
                  :label="item.dictName"
                  :value="item.dictTypeId"
                ></el-option>
              </el-select>
              <el-form-item>
                <el-select v-model="value.dictStatus" clearable placeholder="状态">
                  <el-option :value="0" label="开启" />
                  <el-option :value="1" label="关闭" />
                </el-select>
              </el-form-item>
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="query()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
            <el-button @click="Jump" type="success">添加</el-button>
          </el-form>
        </div>

        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column label="字典编码" prop="dictCode" width="200"></el-table-column>
          <el-table-column label="字典类型" prop="dictTypeName" width="100"></el-table-column>
          <el-table-column label="字典名称" prop="dictName"></el-table-column>
          <el-table-column label="字典值" prop="dictValue"></el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">{{ scope.row.dictStatus==='0'?'启用':'关闭' }}</template>
          </el-table-column>
          <el-table-column label="描述" prop="remark"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page="cs.page.current"
          :page-size="cs.page.size"
          :total="cs.page.total"
          style="padding: 30px 0; text-align: center;"
          layout="total, prev, pager, next, jumper"
          @current-change="queryPage"
        />
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple">&emsp;&emsp;&emsp;</div>
    </el-col>
  </el-row>
</template>


<script>
import dict from "@/api/dict";
import dictType from "@/api/dictType";
export default {
  data() {
    return {
      tableData: [],
      options: [],
      value: {
        dictName:"",
        dictStatus:"",
        dictType:""
      },
      search: "",
      condition: {},
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      cs: {}
    };
  },
  created() {
    this.queryPage();
     this.list();
  },
  methods: {
    //删除数据
    remove(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return dict.del(id).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.queryPage();
          });
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.query();
        })
        .catch(response => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          }
        });
    },
    handleEdit(index, row) {
      this.$router.push({
        path: "/stuteacher/add/" + row.id
      });
    },
    handleDelete(index, row) {
      this.remove(row.id);
    },
    queryPage() {
      this.cs.page = this.page;
      this.cs.dict = this.value;
      console.log(this.cs)
      debugger
      dict.queryPage(this.cs).then(response => {
        this.tableData = response.data.list.records;
        this.cs.page.current = response.data.list.current;
        this.cs.page.list = response.data.list.list;
        this.cs.page.total = response.data.list.total;
      });
    },
    list(){
        dictType.list().then(response=>{
          this.options=response.data.data
        })
    },
    query() {
     console.log(this.value)
      // this.cs.dict = ;

      this.queryPage();
    },
    resetData() {
      this.cs = {};
      this.cs.page = this.page;
      this.value = {};
      this.queryPage();
    },
    handleCurrentChange() {},
    Jump() {
      this.$router.push({
        path: "/stuteacher/add/"
      });
    }
  }
};
</script>

<style>
.ww {
  margin-top: 30px;
}
</style>